<ui:composition
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:nxl="http://nuxeo.org/nxforms/layout"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:c="http://java.sun.com/jstl/core"
  xmlns:a4j="http://richfaces.org/a4j">

  <h1>
    <h:outputText value="#{userManagementActions.selectedUser.id}" />
  </h1>

  <a4j:outputPanel id="userDetailsPanel" layout="block">

  <h:form>
    <p class="action_bar directoryBack">
      <h:commandLink immediate="true"
        action="#{userManagementActions.toggleShowUserOrGroup}">
        <h:graphicImage value="/icons/arrow_left.gif" />
        <h:outputText value="#{messages['command.directoryBack']}" />
        <f:ajax execute="@this" render="usersPanel"
          actionListener="#{jsfResetActions.resetComponents}" />
      </h:commandLink>
    </p>
  </h:form>

  <h:form id="deleteUserForm" rendered="#{userManagementActions.allowDeleteUser and notReadOnly}">
    <h:outputScript target="#{pageJsTarget}">
    function confirmDeleteUser() {
      return confirm("#{messages['label.userManager.confirmDeleteUser']}");
    }
    </h:outputScript>
    <div class="action_bar">
      <ul>
        <li class="selected">
          <h:commandLink
            action="#{userManagementActions.deleteUser}"
            onclick="if (!confirmDeleteUser()) { return false; }"
            render="usersPanel">
            <h:graphicImage value="/icons/delete.png" />
            <h:outputText value="#{messages['command.delete']}" />
            <f:ajax execute="@this" render="usersPanel" />
          </h:commandLink>
        </li>
      </ul>
    </div>
    <div style="clear: both" />
  </h:form>

  <div class="tabsBar subtabsBar">
    <h:form>
      <ul>
        <li class="#{nxu:test(userManagementActions.detailsMode == 'view', 'selected', '')}">
          <h:commandLink action="#{userManagementActions.setDetailsMode('view')}"
            immediate="true">
            <h:outputText value="#{messages['label.userManager.viewUser']}" />
            <f:ajax execute="@this" render=":viewUserView:userDetailsPanel " />
          </h:commandLink>
        </li>

        <c:if test="#{userManagementActions.allowEditUser and notReadOnly}">
          <li class="#{nxu:test(userManagementActions.detailsMode == 'edit', 'selected', '')}">
            <h:commandLink
              action="#{userManagementActions.setDetailsMode('edit')}" immediate="true">
              <h:outputText value="#{messages['label.userManager.editUser']}" />
              <f:ajax execute="@this" render=":viewUserView:userDetailsPanel" />
            </h:commandLink>
          </li>
        </c:if>

        <c:if test="#{userManagementActions.allowChangePassword and notReadOnly}">
          <li class="#{nxu:test(userManagementActions.detailsMode == 'editPassword', 'selected', '')}">
            <h:commandLink action="#{userManagementActions.setDetailsMode('editPassword')}"
              immediate="true">
              <h:outputText value="#{messages['command.change.password']}" />
              <f:ajax execute="@this" render=":viewUserView:userDetailsPanel" />
            </h:commandLink>
          </li>
        </c:if>

      </ul>
    </h:form>
  </div>
  <div style="clear: both" />

  <div class="tabsContent">
    <ui:insert name="view_user_tab_content">
      <c:if test="#{userManagementActions.detailsMode == 'view'}">
        <h:form id="viewUser">
          <nxl:layout name="gridUserLayout" mode="view" value="#{userManagementActions.selectedUser}" />
        </h:form>
      </c:if>
    </ui:insert>

    <ui:insert name="edit_user_tab_content">
      <c:if test="#{userManagementActions.detailsMode == 'edit' and userManagementActions.allowEditUser and notReadOnly}">
      <h:form id="editUser">
        <h:outputScript target="#{pageJsTarget}">
          jQuery(document).ready(function() {
            jQuery('#viewUserView\\:editUser').focusFirst();
          });
        </h:outputScript>
        <nxl:layout name="user" mode="edit" value="#{userManagementActions.selectedUser}" />
        <table class="dataInput">
          <tbody>
            <tr>
              <td class="iconColumn"></td>
              <td class="labelColumn">
                <h:commandButton
                  value="#{messages['command.save']}"
                  action="#{userManagementActions.updateUser}"
                  styleClass="button">
                  <f:ajax execute="@form" render=":viewUserView:userDetailsPanel facesStatusMessagePanel" />
                </h:commandButton>
              </td>
              <td class="fieldColumn"></td>
            </tr>
          </tbody>
        </table>
      </h:form>
      </c:if>
    </ui:insert>

    <ui:insert name="edit_user_password_tab_content">
      <c:if test="#{userManagementActions.detailsMode == 'editPassword' and userManagementActions.allowEditUser and notReadOnly}">
      <h:form id="editUserPassword">
        <h:outputScript target="#{pageJsTarget}">
          jQuery(document).ready(function() {
            jQuery('#viewUserView\\:editUserPassword').focusFirst();
          });
        </h:outputScript>
        <nxl:layout name="user" mode="editPassword" value="#{userManagementActions.selectedUser}" />
        <table class="dataInput">
          <tbody>
            <tr>
              <td class="iconColumn"></td>
              <td class="labelColumn">
                <h:commandButton
                  value="#{messages['command.save']}"
                  action="#{userManagementActions.changePassword}"
                  styleClass="button">
                  <f:ajax execute="@form" render=":viewUserView:userDetailsPanel facesStatusMessagePanel" />
                </h:commandButton>
              </td>
              <td class="fieldColumn"></td>
            </tr>
          </tbody>
        </table>
      </h:form>
      </c:if>
    </ui:insert>

  </div>
  </a4j:outputPanel>

</ui:composition>